<!doctype html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head th:include="include :: header">
    <title>轨迹</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="/css/plugins/jsTree/style.min.css" rel="stylesheet">
    <link href="/css/plugins/jqTreeGrid/jquery.treegrid.css"
          rel="stylesheet">
    <link href="/css/plugins/summernote/summernote-0.8.8.css"
          rel="stylesheet">
    <link href="css/plugins/colorpicker/css/bootstrap-colorpicker.min.css" rel="stylesheet">
</head>
<body>
<table>
    <tr>
        <td  style="width: 20%" valign="top">
            <div class="col-sm-3">
                <div class="ibox ibox-body">
                    <div class="ibox-content">
                        <div id="jstree"></div>
                    </div>
                </div>
            </div>
        </td>
        <td>

            <div style="width: 400px; height: 30px;">
                <input type="datetime-local" id="startTime" name="startTime" class="form-control" style="width: 190px; float: left"> --
                <input type="datetime-local" id="endTime" name="endTime" class="form-control" style="width: 190px; float: right">
            </div>

            <div id="container" style="width: 148%;height: 800px;" ></div>
            <span class="input-card" style="width: 160px">
                <div class="input-item">
                    <input type="button" class="btn" value="开始动画" id="start" onclick="startAnimation()"/>
                    <input type="button" class="btn" value="暂停动画" id="pause" onclick="pauseAnimation()"/>
                </div>
                     <div class="input-item">
                    <input type="button" class="btn" value="继续动画" id="resume" onclick="resumeAnimation()"/>
                    <input type="button" class="btn" value="停止动画" id="stop" onclick="stopAnimation()"/>
                </div>
            </span>
        </td>
    </tr>
</table>
<div ></div>
<div th:include="include :: footer"></div>
<script type="text/javascript" src="/js/appjs/contract/map/historyMap.js"></script>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<script src="https://webapi.amap.com/maps?v=1.4.14&key=34f702bfabb9ec6c25ade58d26cb9030&plugin=AMap.CircleEditor"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script type="text/javascript">
    var map = null;
    var marker1 = null;
    var lineArr1 = null;
    function createMap(center,radius,marker,lineArr,qishia) {
        map = new AMap.Map('container', {
            resizeEnable: true
        });
        log.success("创建地图成功");
        marker = new AMap.Marker({
            map: map,
            position: qishia,
            icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png",
            offset: new AMap.Pixel(-26, -13),
            autoRotation: true,
            angle:-90,
        });
        // 绘制轨迹
        var polyline = new AMap.Polyline({
            map: map,
            path: lineArr,
            showDir:true,
            strokeColor: "#28F",  //线颜色
            // strokeOpacity: 1,     //线透明度
            strokeWeight: 6,      //线宽
            // strokeStyle: "solid"  //线样式
        });
        var passedPolyline = new AMap.Polyline({
            map: map,
            // path: lineArr,
            strokeColor: "#AF5",  //线颜色
            // strokeOpacity: 1,     //线透明度
            strokeWeight: 6,      //线宽
            // strokeStyle: "solid"  //线样式
        });
        marker.on('moving', function (e) {
            passedPolyline.setPath(e.passedPath);
        });
        map.setFitView();
        map.add(polyline);
        marker1 = marker;
        lineArr1 = lineArr;
    }
    $('#jstree').on("changed.jstree", function(e, data) {
        if (data.selected != -1) {
            if(data.node.original.hasChildren == false){
                /*根据id获取地理位置*/
                var userid = data.selected[0];
                var startTime = $("#startTime").val();
                var endTime = $("#endTime").val();
                var startTime1 = "";
                var endTime1 = "";

                if(startTime == ""){
                    startTime1 = "1";
                }else {
                    startTime1= startTime;
                }
                if(endTime == ""){
                    endTime1 = "1";
                }else {
                    endTime1 = endTime;
                }
                $.ajax({
                    type : "post",
                    url : "/contract/site/getUserSite",
                    data : {
                        'gather' : userid+","+startTime1+","+endTime1
                    },
                    success : function(data) {
                        console.log(data)
                        if(data.lujing != ""){
                            var marker, lineArr = eval("(["+ new Array(data.lujing)+"])");

                            var qishi = "["+data.qi+","+data.zhong+"]";
                            var qishia = eval("("+ qishi+")");

                            /*中心点*/
                            var center = map.getCenter();
                            /*半径*/
                            var radius = "100";
                            /*重置地图*/
                            createMap(center,radius,marker,lineArr,qishia);
                        }
                    }
                });
            }
        }
    });
    function startAnimation () {
        marker1.moveAlong(lineArr1, 200);
    }

    function pauseAnimation () {
        marker1.pauseMove();
    }

    function resumeAnimation () {
        marker1.resumeMove();
    }

    function stopAnimation () {
        marker1.stopMove();
    }
</script>
</body>
</html>